<!--
 * @Author: xiaodong 565071984@qq.com
 * @Date: 2022-05-08 19:52:05
 * @LastEditors: xiaodong 565071984@qq.com
 * @LastEditTime: 2022-05-17 19:38:29
 * @FilePath: /小票/src/views/accountManagement/userManagement/components/UserManagementEdit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    :append-to-body="true"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item
        :label="$t('accountManage.accountType') /*账号类型*/"
        prop="account"
      >
        <el-input
          v-model.trim="form.account"
          autocomplete="off"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('accountManage.chargingMode') /*收费模式*/">
        <el-select
          v-model="form.region"
          :placeholder="
            $t('accountManage.pleaseSelChargingMode') /*请选择收费模式*/
          "
        >
          <el-option
            :label="$t('accountManage.solPer') /*按个*/"
            value="shanghai"
          ></el-option>
          <el-option
            :label="$t('accountManage.solPackage') /*按套餐*/"
            value="beijing"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('accountManage.buyNumber') /*购买数量*/"
        prop="username"
        :required="false"
      >
        <el-input v-model.trim="form.username" autocomplete="off" width="200px">
          <template slot="append">
            {{ $t('accountManage.per') /*个*/ }}
          </template>
        </el-input>
        <!-- <span class="num-tip">个</span> -->
      </el-form-item>
      <el-form-item :label="$t('accountManage.buyPackage') /*购买套餐*/">
        <el-select
          v-model="form.region"
          :placeholder="$t('accountManage.pleaseBuyPackage') /*请选择套餐*/"
        >
          <el-option
            :label="$t('accountManage.20PerAccount') /*20个账号*/"
            value="20"
          ></el-option>
          <el-option
            :label="$t('accountManage.50PerAccount') /*20个账号*/"
            value="50"
          ></el-option>
          <el-option
            :label="$t('accountManage.100PerAccount') /*20个账号*/"
            value="100"
          ></el-option>
          <el-option
            :label="$t('accountManage.200PerAccount') /*20个账号*/"
            value="200"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ $t('common.cancel') /*取消*/ }}</el-button>
      <el-button type="primary" @click="save">
        {{ $t('common.sure') /*确 定*/ }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getCanBuyTanantList } from '@/api/agents.js'
  import { doEdit } from '@/api/userManagement'
  export default {
    name: 'DeviceBuy',
    props: {
      // dataList: {
      //   type: Array,
      //   default: function () {
      //     return []
      //   },
      // },
    },
    data() {
      return {
        tanantList: [],
        checkList: ['选中且禁用', '复选框 A'],
        form: {
          username: '',
          password: '',
          email: '',
          permissions: [],
        },
        rules: {
          username: [
            { required: true, trigger: 'blur', message: '请输入用户名' },
          ],
          password: [
            { required: true, trigger: 'blur', message: '请输入密码' },
          ],
          email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
          permissions: [
            { required: true, trigger: 'blur', message: '请选择权限' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      async getCanBuyTanantListFunc() {
        const res = await getCanBuyTanantList()
        const data = res?.data
        console.log(res, '获取数据 - 租户账号列表')
        this.tanantList = data?.data || []
      },
      showEdit(row) {
        if (!row) {
          this.title = '选择设备账号'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(this.form)
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style scoped>
  .num-tip {
    margin: 0 0 0 12px;
  }
</style>
